<template>
	<tm-fullView>
		<view>
			<tm-menubars  title="数字翻牌" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
			
			<tm-sheet :shadow="24">
				<view class="text-size-s text-weight-b mb-24">默认</view>
				<view class="flex-center">
					<tm-sheet flat :margin="[0,0]" :padding="[32,12]"  color="primary" text>
						<tm-flop :startVal='0' :decimals="1" :endVal='num' :duration='3000'></tm-flop>
					</tm-sheet>
					<tm-sheet flat :margin="[0,0]" :padding="[32,12]"  color="primary">
						<tm-flop ref="flop" prefix="¥" suffix="元"   separator=',' :startVal='0' :endVal='56936' :duration='3000'></tm-flop>
					</tm-sheet>
				</view>
				<view class="mt-32">
					<tm-button text size="m" @click="num=360.6">改变数字</tm-button>
					<tm-button text size="m" @click="$refs.flop.start(0)">再次播放</tm-button>
					<tm-button text size="m" @click="$refs.flop.pause()">暂停播放</tm-button>
				</view>
			</tm-sheet>
			<tm-sheet :shadow="24">
				<view class="text-size-s text-weight-b mb-24">插槽</view>
				<view class="flex-center">
					<tm-flop prefix="¥"   separator=',' :startVal='0' :endVal='56936' :duration='3000'>
						<template v-slot:default="{value}">
							<view :class="[$tm.vx.state().tmVuetify.black ? ' bk' : '']" class="primary text px-32 py-24 round-4" style="font-size: 60rpx;font-weight: bold;">
								{{value}}
							</view>
						</template>
					</tm-flop>
				</view>
				
			</tm-sheet>
		</view>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmFlop from "@/tm-vuetify/components/tm-flop/tm-flop.vue"
	

	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmFlop},
		data() {
			return {
				num:10.3
			};
		},
		methods: {
			
		},
	}
</script>

<style lang="less">

</style>
